<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<div class="gv-forms gv-forms-fluid" layout="column">
  <div class="gv-forms-header">
    <h1>Resources</h1>
  </div>
  <div class="gv-form">
    <h2></h2>
    <div class="gv-form-content" layout="column">
      <md-table-container ng-show="$parent.apiCtrl.api.resources.length > 0">
        <table md-table>
          <thead md-head md-order="order">
            <tr md-row>
              <th md-column order-by="name">Name</th>
              <th md-column order-by="type">Type</th>
              <th md-column>Enabled</th>
              <th md-column permission permission-only="'api-definition-u'"></th>
            </tr>
          </thead>
          <tbody md-body>
            <tr md-row ng-repeat="resource in $parent.apiCtrl.api.resources | orderBy: order">
              <td md-cell>
                <span><b>{{resource.name}}</b></span>
              </td>
              <td md-cell>{{apiResourcesCtrl.getResourceTypeName(resource.type)}}</td>
              <td md-cell>
                <ng-md-icon ng-if="resource.enabled" icon="play_circle_outline" style="fill: green"></ng-md-icon>
                <ng-md-icon ng-if="!resource.enabled" icon="pause_circle_outline" style="fill: red"></ng-md-icon>
              </td>
              <td md-cell permission permission-only="'api-definition-u'">
                <div layout="row">
                  <ng-md-icon
                    ng-click="apiResourcesCtrl.showResourcePanel(resource)"
                    icon="settings"
                    size="24"
                    style="margin-right: 20px"
                  ></ng-md-icon>
                  <ng-md-icon ng-click="apiResourcesCtrl.deleteResource($index)" icon="delete" size="24"></ng-md-icon>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </md-table-container>

      <md-sidenav class="md-sidenav-right md-whiteframe-z2 resource" md-component-id="resource-config">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2 style="color: white">
              <span>Resource: {{apiResourcesCtrl.resource.name}} [{{apiResourcesCtrl.resource.type}}]</span>
            </h2>
            <span flex></span>

            <md-switch
              ng-model="resourceEnabled"
              ng-disabled="resourceConfigurationForm.$invalid || apiResourcesCtrl.creation"
              ng-change="apiResourcesCtrl.switchEnabled()"
              class="md-block"
              aria-label="Enable resource"
            ></md-switch>
          </div>
        </md-toolbar>

        <md-content layout-padding>
          <h4>General</h4>
          <form name="resourceForm" ng-submit="apiResourcesCtrl.save()" novalidate>
            <div layout="row" layout-sm="column">
              <md-input-container class="md-block" flex-gt-xs>
                <label>Name</label>
                <input required ng-model="apiResourcesCtrl.resource.name" md-autofocus type="text" ng-required="true" />
              </md-input-container>

              <div flex="5" hide-xs hide-sm>
                <!-- Spacer //-->
              </div>

              <md-input-container class="md-block" flex-gt-xs>
                <label>Type</label>
                <md-select
                  ng-model="apiResourcesCtrl.resource.type"
                  placeholder="Type"
                  required
                  ng-required="true"
                  ng-change="apiResourcesCtrl.onTypeChange()"
                  ng-disabled="!apiResourcesCtrl.creation"
                >
                  <md-option ng-repeat="type in apiResourcesCtrl.types" ng-value="type.id">{{type.name}}</md-option>
                </md-select>
              </md-input-container>
            </div>
          </form>

          <br />

          <h4>Configuration</h4>
          <div layout="row" layout-align="start center">
            <form
              name="resourceConfigurationForm"
              sf-schema="apiResourcesCtrl.resourceJsonSchema"
              sf-form="apiResourcesCtrl.resourceJsonSchemaForm"
              sf-model="apiResourcesCtrl.resource.configuration"
              sf-options="{ validateOnRender: true, formDefaults: { startEmpty: true } }"
              novalidate
            ></form>
          </div>

          <br />

          <div layout="column" layout-align="start center" layout-wrap>
            <md-button
              class="md-raised"
              ng-disabled="resourceConfigurationForm.$invalid || resourceForm.$invalid"
              ng-click="apiResourcesCtrl.saveResource()"
              >Save</md-button
            >
          </div>
        </md-content>
      </md-sidenav>

      <gravitee-empty-state
        ng-if="$parent.apiCtrl.api.resources.length == 0"
        icon="style"
        model="Resource"
        message="Resources will appear here"
        sub-message="Start creating a resource"
        create-mode="true"
      ></gravitee-empty-state>

      <div permission permission-only="'api-definition-c'" ng-style="$parent.apiCtrl.api.resources.length == 0 && {'text-align':'center'}">
        <md-button
          ng-class="{'md-fab-bottom-right': $parent.apiCtrl.api.resources.length > 0}"
          class="md-fab"
          aria-label="Add resource"
          ng-click="apiResourcesCtrl.showResourcePanel()"
        >
          <ng-md-icon icon="add"></ng-md-icon>
        </md-button>
      </div>
    </div>
  </div>
</div>
